<template>
  <div class="myTeam" @click="showxuanze = false;">
    <ComHeader title="我的团队" leftArrow='true' />
    <div class="team-wrap" style="line-height: 28px;">
      <!-- 我的信息 -->
      <div class="parentData group-item" v-if="parentData" style="position: fixed;right: 0.2rem;left: 0.2rem;top: 1.4rem;bottom: 0;">

        <!-- 第一部分 -->
        <div>
          <!-- 我的ID -->
          <p>
            <span style="width: 90px;display:inline-block;color:#000;">我的ID:</span>
            <span style="font-size: 16px;">{{myid}}</span>
          </p>
          <!-- 我的上级ID -->
          <p>
            <span style="width: 90px;display:inline-block;color:#000;">我的上级：</span>
            <span  style="font-size: 16px;">{{parentData.id}}</span>
            <!-- <i class="iconfont icon-icon icon-ParentData" v-if="!isShowParentData" ></i>
            <i class="icon-arrow-down icon-ParentData" v-else><img class="max" src="../../static/icons/icon-arrow-down.png" alt="" style="width: 12px;height: 12px;"></i> -->
          </p> 
          <!-- 我的上级详情 -->
          <p >
            <img :src="parentData.headimgurl" class="img30"/>
            <span>{{parentData.realname?parentData.realname:parentData.nickname}}</span>
            <i>{{parentData.level?parentData.level:'普通用户'}}</i>
            <i style="position: absolute;right: 0;">{{parentData.regdate.slice(0,10)}}</i>
          </p>          
        </div>



        <!-- 第二部分,我的详情-->
        <div>
          <div>
              <p>
                  我的团队总人数：<span>{{tuandui}}</span> 人
                  <mt-button type="primary" size="small" @click.stop="showyijian = !showyijian;showteam=false;" class="wodeanniu">一键修改</mt-button> 
                  <!-- 点击，切换是否显示弹出框，并且将我的团队隐藏 -->
              </p>
              <p>
                  我的下级总人数：<span>{{xiaji}}</span> 人
                  <!-- 点击显示，触发函数 -->
                <mt-button type="primary" size="small" class="wodeanniu" @click.stop="findfirst" v-if="!showteam">
                  我的下级
                </mt-button>
                <!-- 点击收起， -->
                <mt-button type="primary" size="small" class="wodeanniu" @click.stop="showteam=false;" v-if="showteam">
                    &nbsp;&nbsp;收&nbsp;&nbsp;&nbsp;起&nbsp;&nbsp;
                </mt-button>
              </p>
            </div>
        </div>
      </div>

      <!-- 一键修改 -->
      <div style="padding:20px 10px 50px;border-radius: 10px;background-color:RGBA(38,162,255,0.6);
          margin-top: 10px;position: absolute;right: 0.2rem;left: 0.2rem;top: 6rem;bottom: 4rem;" v-if="showyijian">
          <mt-field class="" label="需要修改的ID" placeholder="需要修改的ID"rows="2"
            v-model="id1"></mt-field>
          <mt-field class="" label="上级的ID" placeholder="上级的ID" rows="2"
            v-model="id2" ></mt-field>
            <p style="border:0px;color:#fff;">&nbsp;&nbsp;温馨提示：只能修改我的团队下级成员</p>
          <mt-button size="small" @click="tijiao" style="float:right;">提交</mt-button>
      </div>



      <!-- 我的团队列表 滚动翻页，需要设置定位-->
      <div v-show="showteam" class="store-box">
        <!-- 滚动组件类名，需要滚动加载的数据，数据控制开关isPullup，滚动触底函数 -->
          <scroll 
            class="scroll"
            :data="arr1"
            :pullup="isPullup"
            @scrollToEnd="searchMore">
            <ul>
              <!-- 一级 这里的类名parent可以不要-->
              <li 
                @click.stop.prevent="showson1(parentItem)" 
                v-for="(parentItem,idx) in arr1" :key="idx" 
                class="li-one" 
                :class="{'currentClass1': idx == currentIndex1 }">
                <!-- 第一行 -->
                <p>
                  <img :src="parentItem.headimgurl" class="img30">
                  <span >{{parentItem.nickname}}</span>   
                  <span style="float: right;">ID：{{parentItem.id}}</span>   
                </p>
                <!-- 第二行 -->
                <p class="pindent">
                  <span>{{parentItem.level}}</span>
                  <span  class="pindent"> 注册时间：{{parentItem.regdate.slice(0,10)}}</span>      
                  <mt-button type="primary" size="small" class="wodeanniu">修改等级</mt-button>                  
                </p>
                <!-- 第三行 -->
                <p class="pindent">下级人数：0人&nbsp;&nbsp;&nbsp;&nbsp;团队人数：0人</p>


                <!-- 二级 -->
                <div id="son" style="padding:5px 0 5px 20px;" >
                    <ul>
                      <div v-for="(secondParentItem,idx) in arr2" :key="idx">
                          <li v-if="secondParentItem.show && parentItem.id === secondParentItem.parentId"  
                            ref="" class=" li-two">
                            <!-- @click.stop="showson2(secondParentItem)"  -->
                            <p  style="position: relative;">
                              <img :src="secondParentItem.headimgurl" class="img30">
                              <span >{{secondParentItem.nickname}}</span>   
                              <span style="float: right;">ID：{{secondParentItem.id}}</span>   
                            </p>
                            <p  class="pindent" style="position: relative;">
                              <span>{{secondParentItem.level}}</span>
                              <span>{{secondParentItem.regdate.slice(0,10)}}</span>
                              <mt-button type="primary" size="small" class="wodeanniu">修改等级</mt-button>                  
                            </p>
                            <p class="pindent">下级人数：0人&nbsp;&nbsp;&nbsp;&nbsp;团队人数：0人</p>


                            <!-- 三级 -->
                            <div  id="son" style="padding:10px 0 10px 20px;" >
                              <ul>
                                  <li 
                                    v-for="(item,idx) in arr3" :key="idx" 
                                    v-if="item.show && secondParentItem.id === item.parentId" 
                                    class="li-three">
                                    <p class="pindent">
                                      <img :src="item.headimgurl" class="img30">
                                      <span >{{item.nickname}}</span>   
                                      <span style="float: right;">ID：{{item.id}}</span>   
                                    </p>
                                    <p class="pindent">
                                      <span>{{item.level}}</span>
                                      <span>{{item.regdate.slice(0,10)}}</span>
                                      <mt-button type="primary" size="small" class="wodeanniu">修改等级</mt-button>                  
                                    </p>
                                  </li>
                                </ul>
                            </div>
                            
                          </li>
                          <mt-button v-if="secondParentItem.show && parentItem.id === secondParentItem.parentId &&arr2.length ==idx+1" type="default" size="small" style="width: 100%;" @click.self="showmore(parentItem)">查看更多</mt-button>    
                        </div>
                      </ul>
                </div>
              </li>
              <loading v-show="fenyeloading" title="加载中" ></loading>
            </ul>
          </scroll> 
          <!-- 暂无数据 -->
          <div v-if="!arr1" class="notData">
            暂无数据
          </div>
      </div>


    </div>
    <!-- 选择等级页面 -->
    <div class="tishikuang">
        <mt-picker :slots="slots" @change="onValuesChange" v-if="this.showxuanze"></mt-picker>
    </div>
  </div>
</template>

<script>
import api from "@/fetch/api"
import ComHeader from '@/common/ComHeader'
import ComFooter from '@/common/ComFooter'
import Loading from '@/base/loading/loading'
import Scroll from '@/base/scroll/scroll'
import { MessageBox, Spinner, Button,Toast,Picker,Field } from 'mint-ui';
  export default {
    name: 'myTeam',
    data() {
      return {
        data: null,
        parentData: null,
        showteam:false,
        // 原来的isshow
        username: this.getUserId(),
        downData: null,
        showDataLoading: true,
        showNotData: false,
        downData2: null,
        isShowParentData: false,
        getlevel:"",
        myid:'',
        isPullup: true,	
        isHasMore: true,	
        limit: 10, 
        beforeScroll: true, 
        mylevel:'',
        mylevel2:'',
        tarid:'',
        id1:"",
        id2:"",
        page1:1,
        page2:1,
        showyijian:false,
        show3:false,
        aaa:-1,
        shouxia:false,
        showxuanze:false,
        slots: [
                {
                  flex: 1,
                  values: ['普通用户', '共享天使','共享店主',  '城市合伙人', '联合创始人'],
                  className: 'slot1',
                  textAlign: 'center'
                }
              ],
        isshow1:false,
        isshowyijian:false,
        currentIndex1: null,
        jiantou1:true,
        tuandui:0,
        xiaji:0,
        arr1:[],
        arr2:[],
        arr3:[],
        // 为什么为真
        fenyeloading:false,

        // 判断是否是触底事件触发的加载事件
        ischudi:false,
        ischudi2:false,
        now:"",
      };
    },
    components: {
      ComHeader,
      MessageBox,
      Spinner,
      Button,
      Toast,
      Picker,
      Field,ComFooter,Loading,Scroll
    },
    created() {
      // 初始化
      this.start()
      // 获得一级下级
      //this.findfirst()

    },
    methods: {
      // 初始化
      start(){
        //获取我的推荐人（我的上级）
        const params = {
          uid: this.getUId()
        };
        api.getMySuperior(params)
          .catch(res => {
            this.parentData = res.data;
          })

        // 获取我的ID
        this.myid = JSON.parse(window.localStorage.getItem('ethelWxUserInfo')).id 


        const params1 = {
          id: this.getUId()
        };
        // 团队总人数
          api.getmyteam(params1)
          .catch(res => {
            this.tuandui = res.data.msg
          })

        // 下级总人数
        api.getnextteam(params1)
          .catch(res => {
            this.xiaji = res.data.msg
          })


      },
      // 一级下级，滚动加载函数
      searchMore() {
        // 开启加载效果
        this.fenyeloading = true
        // 分页自加
        this.page1++;
        console.log(this.page1)

        // 触底触发判断
        this.ischudi=true
        
        // 触发加载函数
        this.findfirst()
        },

    // 查找一级下级
      findfirst(){

        // 查找一级，显示团队
        this.showteam = true
        
      //  如果是从触底事件进入，则不变
        if(this.ischudi == true){
          this.ischudi=false
        }else{ 
          // 如果是从我的下级进入，则清空列表，重新加载
          this.page1 = 1
          this.page2 = 1
          this.arr1 = []
          this.arr2 = []
          this.arr3 = []
        }

        // 如果显示下级，则不显示一键修改的弹框
        this.showyijian=false;

        // 开启加载动画（中间）
        this.fenyeloading = true
        // 配置参数，页数为默认页数
        var params1 = {
          id: this.getUId(),
          page:this.page1
        };
        api.mytem(params1)
          .catch(res => {
            console.log(res)

            // 没有下级的情况，数组长度为0，或者在数据没回来之前，都不要关闭加载效果
            if(!res.data.mytem.length){
              // 关闭加载动画
              this.fenyeloading = false
              Toast("您目前没有下级人员")
              return
            }    

            // 拼接数组，每一项加上属性show，属性值为false        
            res.data.mytem.forEach((item) => {
              item.show = false
            })
            
            // 分页拼接步骤
            var arr = res.data.mytem
            this.arr1 = [...this.arr1, ...arr]
          })
      },

      // 二级点击加载事件
      showmore(parentItem){
        this.page2++
        console.log(this.page2)
        this.ischudi2 == true
        this.showson1(parentItem)
      },

      // 展示二级，// 传入当前项
      showson1(item){
        // 记录当前项的ID值，三种情况，
        // 一种是为当前ID(分页加载)，不处理
        // 一种是为空，新进入，没有点击过，记录当前ID
        // 一种是其他值，清空数组，并且记录当前ID
        // console.log(this.now)
        // if(this.now ==''){
        //   this.now = item.id
        // }
        // if(this.now != item.id){
        //   // this.page2 = 1
        //   this.now =item.id
        // }
        if(this.ischudi2 == true){
            this.ischudi2 = false
        }else{
          this.page2 = 1
        //   this.arr2 = []

        }
        console.log(this.ischudi2)
        console.log("this.ischudi2")
        // console.log(this.now)
        // console.log(item.id)
        // console.log("item.id")
        const params3 = {
          id: item.id,
          page:this.page2
        };
        
        if(item.show == false) {
         item.show = true
          api.mytem(params3)
            .catch(res => {
              var arr = res.data.mytem
              this.arr2 = [...this.arr2, ...arr]              
              this.arr2.forEach(a=>{
                a.parentId = item.id
                a.show = true
              })
            })
        } else {
          item.show = false
          let otherAttr = this.arr2
          this.arr2 = []
          for(let  i = 0 ; i< otherAttr.length; i++ ){
              otherAttr[i].show = false
          }
          this.arr2 = otherAttr
        }
        
        
         

      },

      // 展示三级
      showson2(item){
        console.log(item.id)
        const params4 = {
          id: item.id,
          page:1
        };
        if(item.show == false) {
         item.show = true
          api.mytem(params4)
            .catch(res => {
              console.log(res)
              console.log('res')
              if(res.data.mytem.length == 0){
                Toast("当前用户没有下级")
              }
                this.arr3 = res.data.mytem
                this.arr3.forEach(a=>{
                  a.parentId = item.id
                  a.show = true
                })
                this.arr3.forEach((cel ,index) => {
                  if(cel.parentId == item.id){
                    cel.show = cel.show ? false : true 
                  }
                })              
            })
        }
      },
      
      // 一键修改上下级，提交
      tijiao(){
        this.myid = JSON.parse(window.localStorage.getItem('ethelWxUserInfo')).id 
        console.log(this.id1,this.id2,this.myid)
        this.id1=Number(this.id1)
        this.id2 = Number(this.id2)
        var params = {
          myid:this.myid,
          yuanid:this.id1,
          tarid:this.id2
        }
        console.log(params)
        api.moduserpath(params)
                .catch(error => {
                  console.log("111")
                  console.log(error);  
                  console.log(error.statusText);
                  console.log("222")
                  // 没有找到该ID名
                  Toast({
                    message: error.data.msg,
                    position: 'center',
                    duration: 1000
                  });
                  const params2 = {
                        // username: this.username,
                        id: this.getUId(),
                      };
                      api.getMyTeam(params2)
                        .catch(res => {
                          this.print(res);
                          this.info=res.data.msg
                          if(res.response && res.response.status == 500){
                            this.showDataLoading = false;
                            this.showNotData = true;
                          }else{
                            for (var i = 0; i < res.data.mytem.length; i++) {
                              var mytem = res.data.mytem[i];
                              mytem.showteam = false;
                            }
                            this.showDataLoading = false;
                            this.data = res.data;
                          }
                        })
                    },
                    
                )
        this.showyijian = false;
      },
      // 滚动组件，修改内容
      onValuesChange(picker, values) {
          if (values[0] > values[1]) {
            picker.setSlotValue(1, values[0]);
            console.log(picker, values)
          }
          console.log( values)
          if(values =='普通用户') {
            this.mylevel2=0
          }else if(values =='共享天使') {
            this.mylevel2 = 1
          }else if(values =='共享店主') {
            this.mylevel2 = 2
          }else if(values =='城市合伙人') {
            this.mylevel2 = 3
          }else if(values =='联合创始人') {
            this.mylevel2 = 4
          }
          console.log("11")
          console.log( this.mylevel)
          console.log( this.mylevel2)
          console.log("11")

          if(this.mylevel2 <= this.mylevel){
              console.log(this.myid,this.tarid,this.mylevel2)
              this.mylevel2 = Number(this.mylevel2)
              var params={
                myid:this.myid, 
                tarid:this.tarid,
                getlevel:this.mylevel2
              }
              console.log("999")
              console.log(params)
              console.log("999")
              api.moduserlevel(params)
                .then(res=>{
                  console.log(res)
                  console.log("456")
                })
                .catch(error => {
                  console.log("99999")
                  console.log(error);  

                  console.log(error.data.msg);
                  if(error.data.msg != "修改成功"){
                    // this.ss = true;
                    // this.text = error.data.msg
                    // setTimeout(()=>{
                    // this.ss = false;
                    // },3000)
                    Toast({
                      message: error.data.msg,
                      position: 'center',
                      duration: 1000
                    });
                  }

                  console.log("99999")
                  const params2 = {
                        // username: this.username,
                        id: this.getUId(),
                      };
                      api.getMyTeam(params2)
                        .catch(res => {
                          this.print(res);
                          this.info=res.data.msg
                          if(res.response && res.response.status == 500){
                            this.showDataLoading = false;
                            this.showNotData = true;
                          }else{
                            for (var i = 0; i < res.data.mytem.length; i++) {
                              var mytem = res.data.mytem[i];
                              mytem.isShow = false;
                            }
                            this.showDataLoading = false;
                            this.data = res.data;
                          }
                        })
                    },
                    
                )
              }else{
                Toast({
                  message: "权限不足",
                  position: 'center',
                  duration: 1000
                });

              }

        },
      
      // 修改等级函数
      xiugaidengji(){
        var e = window.event || e
        var target = e.target||e.srcElement
        this.tarid =Number(target.parentElement.id) 
        console.log("111")
        console.log(this.tarid)
        console.log("222")
        this.myid = JSON.parse(window.localStorage.getItem('ethelWxUserInfo')).id 
        var level = JSON.parse(window.localStorage.getItem('ethelWxUserInfo')).level
        console.log("!!!")
        console.log(window.localStorage.getItem('ethelWxUserInfo'))
        console.log(level)
        console.log("!!!")
        if(level=='普通用户') {
            this.mylevel = 0
          }else if(level=='共享天使') {
            this.mylevel = 1
          }else if(level=='共享店主') {
            this.mylevel = 2
          }else if(level=='城市合伙人') {
            this.mylevel = 3
          }else if(level=='联合创始人') {
            this.mylevel = 4
          }
        this.showxuanze =true;
      },

      },

    
  };
</script>



<style lang="stylus" scoped>
div.team-wrap{
  padding: .4rem;
  padding-top: 1.45rem;
}
.parentData, .team-total p{
  font-size: .4rem;
  border-bottom: 1px solid #ddd;
  padding: .2rem 0;
  span{
    color: #ff555f
  }
}
.group-name{
  margin-top: .77em;
  margin-bottom: .3em;
  color: #666;
  font-size: .36rem;
}
.group-item{
  padding: .2rem 0;
  .icon-arrow-down{
    width: .4rem;
    height: .4rem;
    display: inline-block;
  }
  .item-avatar img{
    width: .6rem;
    height: .6rem;
    border-radius: 1rem;
    /* overflow: hidden; */
  }
  .item-level{
    font-size: .3rem;
    color: #555;
    margin-left: .1rem;
    .icon-level{
      width: .4rem;
      margin-top: -.1rem;
      height: .4rem;
      vertical-align: middle;
      margin-right: .1rem;
    }
  }
  .item-regdate{
    font-size: .25rem;
    color: #999
  }
}
.group-item-btn{
  border: 1px solid #25b5fe;
  color: #25b5fe;
  padding: .06rem;
  vertical-align: bottom;
  border-radius: .1rem;
  font-size: .3rem;
}
.down-main{
  padding-left: .6rem;
  .group-item-down{
    padding: .2rem 0;
    color: #666;
  }
}
.nextnum{
  background: #999;
  color: #fff;
  border-radius: 1rem;
  display: inline-block;
  width: .4rem;
  text-align: center;
  height: .4rem;
}
.group-item-btn{
  margin-left: .2rem;
}
.dataLoading{
  width: 7rem;
  margin: 1rem auto;
  border:1px solid #ccc;
  padding:20px 50px;
  text-align: center;
  background-color:#ddd;
  border-radius: 0.5rem;
}
.notDown{
  padding-top: .2rem;
  color: #777;
}
.downData2{
  padding-left: 1rem;
}
.icon-ParentData{
  float: right;
}
.xiugai{
  background-color: #999;
  opacity: 0.7;
  border-radius: 0.6rem;
  width: 80%;margin:0 auto;padding:40px 10px;
  height: 150px;
}
.btn{float:right;border-radius: 0.5rem;height:0.7rem;}
.tishikuang{background-color: #ddd;border-radius: 0.65rem;position: fixed;left:50%;top:50%;transform: translate(-50%,-50%);padding:0 2rem;}
.wodeanniu{float:right;height: 20px;}
 .store-box{
    position: fixed;
    top: 6rem;
    width: 100%;
    bottom: 0;
    left:0rem;
    right:0rem;
  }
  .scroll{
    height: 100%;
    overflow: hidden;
  }
  .li-one{
    margin:10px 5px;border-radius: 10px;background-color: #fff;padding:5px;border:2px solid #999;
  }
  .li-two{
    margin:10px 0  10px 5px ;border-radius: 10px;background-color: #fff;padding:5px 2px;
    border:2px solid #ccc;
  }
  .li-three{
    margin:10px 0  10px 5px ;border-radius: 10px;background-color: #fff;padding:5px 0;
  }
  p{
    position: relative;
  }
  .pindent{
    text-indent: 0.9rem;
  }
  .img30{
    border-radius: 50%;height: 30px;
  }
</style>
